<template>
  <div class="container mx-auto">
    <div>
      环境变量 BASE_URL: {{ baseUrl }}
    </div>
    <div class="mt-20 flex gap-4">
      <PageMap />
      <VChart :option="option" class="w-[500px] h-[400px]" />
    </div>
  </div>
</template>

<script setup>
import "echarts";

const config = useRuntimeConfig();
const baseUrl = ref(config.public.baseUrl);

const option = ref({
  title: {
    text: "ECharts Getting Started Example",
  },
  xAxis: {
    data: ["shirt", "cardigan", "chiffon", "pants", "heels", "socks"],
  },
  yAxis: {},
  series: [
    {
      name: "sales",
      type: "bar",
      data: [5, 10, 15, 20, 25, 20],
    },
  ],
});
</script>